<template>
	<view class="content">
		<web-view :src="url" @message="handlePostMessage"></web-view>
	</view>
</template>

<script>
	/* @description  这个页面主要展示如何使用webview加载pdf和页面通信
	 * 组件使用pdf.js源码修改了部分内容 见hybrid/web/viewer.js L:1914
	 * 在你的项目中导入【hybrid】并配置好路由，完成webview的加载，监听，uni通信，也可以将本页面做成组件形式
	 * 项目中包括调试文件，你可以自行修改所有的功能，在你完成后需要自行剔除不需要的文件以控制项目的大小（你也可以不管，拿来cv即用）
	 * 本地pdf如何预览：本地预览需要获取存储读取权限后才能拿到本地文件的路径，在实际使用时应当区分在线和本地场景
	 * @tutorial [多甘范科夫斯基]https://blog.csdn.net/qq_33920944?type=blog
	 */
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/web/viewer.html', // 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
				fileUrl: "", // pdf网络路径
				url: '', // 最终显示在web-view中的路径
				currentPage: 5, //初始页
				totalPage: 0, //总页码
				currentReadPage: 0, //当前页码
				localPdf: "/hybrid/html/web/exppdf.pdf"//本地pdf
			};
		},

		onLoad(options) {
			console.log("pdfviewer msg:", options);
			/* 设置标题 */
			this.fileUrl = options.url
			uni.setNavigationBarTitle({
				title: options.title
			});
			/* 初始页面 */
			this.intViewer(); //获取pdfs数据
		},

		mounted() {
			// #ifdef H5
			window.addEventListener("message", this.ReceiveMessage);
			// #endif
		},

		/**
		 * @description 清除pdf留下的缓存，不干扰新的pdf载入
		 */
		beforeDestroy() {
			uni.removeStorage({ 
				key: 'pdfjs.history',
				success() {
					// console.log("removeStorage", res)
				}
			})
		},

		methods: {
			/**
			 * @description 初始化到webviewer
			 * @param {string} tag 预览的目标地址
			 * @param {Number}  currentPage 初始页
			 */
			intViewer() {
				const tag = this.fileUrl, //本地this.localPdf
					currentPage = this.currentPage;
				this.url = `${this.viewerUrl}?file=${encodeURIComponent(tag)}&page=` + currentPage;
			},
			/**
			 * @description 组件通信
			 * @param {object} data 页面通信返回的值
			 */
			// #ifdef APP-PLUS
			handlePostMessage(data) {
				let arr = data.detail.data.pop()
				this.totalPage = arr[0].totalPage //总页数
				this.currentReadPage = arr[1].page + 1 //当前页数
				console.log("app:", this.totalPage, this.currentReadPage);
			},
			// #endif
			
			// #ifdef H5 
			ReceiveMessage(event) {
				if (event.data && event.data.data && event.data.data.arg) {
					this.totalPage = event.data.data.arg[0].totalPage
					this.currentReadPage = event.data.data.arg[1].page + 1
				}
				console.log("app:", this.totalPage, this.currentReadPage);
			},
			// #endif
			
			//页面销毁前动作
			addBrowseRecord() {
				// console.log("总页数：",this.totalPage);
				// console.log("当前页数：",this.currentReadPage);
			},

		}
	};
</script>

<style lang="scss" scoped>
</style>